/*
 * @Author: Haochen
 * @Date: 2021-12-07 15:49:55
 * @LastEditTime: 2021-12-26 13:24:50
 * @FilePath: \recipes-admin-system\src\router\index.js
 */
import Vue from 'vue';
import VueRouter from 'vue-router';
// # 导入属于主页
import Home from '../views/home/Home.vue';
// # 导入登录
const Login = () => import('../views/login/Login.vue');
// import Register from '../views/register/Register.vue';
// # 导入走失页面
const Error = () => import('../views/404/Error.vue');
// # 导入用户组件
import Admins from '@/views/admins/Admins.vue';
// # 导入轮播图组件
const Swiper = () => import('@/views/swiper/Swiper.vue');
// # 导入菜谱管理组件
import Recipes from '../views/recipes/Recipes.vue';
// # 导入会员管理组件
import Members from '../views/members/Members.vue';
// # 导入套餐管理组件
import Meals from '../views/meals/Meals.vue';
// # 导入图表
import Charts from '@/views/charts/Charts.vue';

Vue.use(VueRouter);

import api from '@/api/api.js';
import store from '@/store/index.js';
import { Message } from 'element-ui';

const routes = [
  {
    path: '/',
    redirect: '/home',
  },

  {
    path: '/home',
    component: Home,

    beforeEnter: async (to, from, next) => {
      if (localStorage.token) {
        const { data: res } = await api.admins.getAllAdmins();

        // console.log(res);
        if (res.code === 200) {
          // store.commit('SET_USERINFO', res.data);
          next();
        } else {
          this.$message.error('登录已过期,请重新登录');
          next('/login');
        }
      } else {
        Message({
          message: '请先登录',
          type: 'warning',
        });
        next('/login');
      }
    },
    children: [
      {
        path: '',
        name: 'Home',
        component: Charts,
      },
      {
        path: 'admins',
        name: 'Admins',
        component: Admins,
        meta: {
          isKeepAlive: false,
          title: '用户管理',
        },
      },
      {
        path: 'swiper',
        name: 'Swiper',
        component: Swiper,
        meta: {
          isKeepAlive: false,
          title: '轮播图管理',
        },
      },
      {
        path: 'recipes',
        name: 'Recipes',
        component: Recipes,
        meta: {
          isKeepAlive: false,
          title: '菜谱管理',
        },
      },
      {
        path: 'members',
        name: 'Members',
        component: Members,
        meta: {
          isKeepAlive: false,
          title: '会员管理',
        },
      },

      {
        path: 'meals',
        name: 'Meals',
        component: Meals,
        meta: {
          isKeepAlive: false,
          title: '套餐管理',
        },
      },
    ],
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
  // {
  //   path: '/register',
  //   name: 'Register',
  //   component: Register,
  // },
  {
    path: '*',
    name: 'Error',
    component: Error,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/about/About.vue'),
  },
];

const router = new VueRouter({
  routes,
  mode: 'history',
});

// router.beforeEach((to, from, next) => {
//   // console.log(to);
//   if (/^\/home$/.test(to.path)) {
//     if (localStorage.token) {
//       alert('登录成功');
//       next();
//     } else {
//       alert('未登录');
//       next('/login');
//     }
//   } else {
//     next();
//   }
// });

export default router;
